<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24" style="padding-top: 0px">
          <a-col :md="6" :sm="8">
            <a-form-item label="采购订单号" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <a-input placeholder="采购订单号" v-model="queryParam.poNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="18" :sm="16">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="showOrClose" icon="search" style="margin-left: 10px;">高级查询</a-button>
              <a-button type="primary" icon="download" @click="handleExportXls('eip_purchase_order')" style="margin-left: 10px;">导出</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-row v-if="show">
      <a-col :md="6" :sm="8">
        <a-form-item label="合同编号" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
          <a-input placeholder="合同编号" v-model="queryParam.conCode"/>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="合同名称" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
          <a-input placeholder="合同名称" v-model="queryParam.conName"/>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="采购方公司名称" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
          <a-input placeholder="采购方公司名称" v-model="queryParam.buyerName"/>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="采购方物料描述" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
          <a-input placeholder="采购方物料描述" v-model="queryParam.materialDesc"/>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="合同签订日期(始)" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
          <a-date-picker valueFormat="YYYY-MM-DD" v-model="queryParam.sellerSignTimeStart"></a-date-picker>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="合同签订日期(止)" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
          <a-date-picker valueFormat="YYYY-MM-DD" v-model="queryParam.sellerSignTimeEnd"></a-date-picker>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="工程项目名称" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
          <a-input placeholder="工程项目名称" v-model="queryParam.prjName"/>
        </a-form-item>
      </a-col>
    </a-row>
    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>
        已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>
        项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <!--      :scroll="{ x: 2000,y:700 }"-->
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="index"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="toSalesOrder(record)">关联销售订单</a>
          <a-divider type="vertical"/>
          <a @click="toPurchaseOrderDetail(record)">详情</a>
        </span>
      </a-table>
    </div>
    <eipPurchaseOrder-modal ref="modalForm" @ok="modalFormOk"/>
    <eipPurchaseOrder-detail v-if="showPurchaseOrderDetail" ref="EipPurchaseDetail" :dataSourceDetail="dataSourceDetail" @close="closeDetail"/>
  </a-card>
</template>

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import EipPurchaseOrderDetail from './modules/EipPurchaseOrderDetail'
  import EipPurchaseOrderModal from './modules/EipPurchaseOrderModal'
  import { deleteAction, postAction, getAction, downFile } from '@/api/manage'

  export default {
    name: 'EipPurchaseOrderList',
    mixins: [JeecgListMixin],
    components: {
      EipPurchaseOrderModal,
      EipPurchaseOrderDetail
    },
    data() {
      return {
        value: ['平高电器'],
        description: 'eip_purchase_order管理页面',
        show: false,
        showPurchaseOrderDetail: false,
        sellerSignTimeStart: null,
        sellerSignTimeEnd: null,
        dataSourceDetail: {}, //详细数据
        // 表头
        columns: [
          {
            title: '供应商名称',
            align: 'center',
            dataIndex: 'supplierName'
          },
          {
            title: '采购订单号',
            align: 'center',
            dataIndex: 'poNo'
          },
          {
            title: '采购订单行项目号',
            align: 'center',
            dataIndex: 'poItemNo'
          },
          {
            title: '合同签订日期',
            align: 'center',
            dataIndex: 'sellerSignTime',
            customRender: function(text) {
              return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
            }
          },
          {
            title: '工程项目名称',
            align: 'center',
            dataIndex: 'prjName'
          },
          {
            title: '采购数量',
            align: 'center',
            dataIndex: 'amount'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: '/eipPurchaseOrder/list',
          exportXlsUrl: '/eipPurchaseOrder/exportXls'
          // delete: "/pg/eipPurchaseOrder/delete",
          // deleteBatch: "/pg/eipPurchaseOrder/deleteBatch",
          // importExcelUrl: "/eipPurchaseOrder/importExcel",
        },
        dictOptions: {}
      }
    },
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      }
    },
    methods: {
      initDictConfig() {
      },
      showOrClose() {
        this.show = !this.show
      },
      toSalesOrder(record) {
        localStorage.setItem('eipPoNo', record.poNo + '-' + record.poItemNo)
        this.$router.push({ path: '/eipSalesOrder/list' })
      },
      closeDetail() {
        this.showPurchaseOrderDetail = false
      },
      toPurchaseOrderDetail(record) {
        this.showPurchaseOrderDetail = true
        this.dataSourceDetail = record
      },
      loadData(arg) {
        //加载采购订单
        if (arg === 1) {
          this.ipagination.current = 1
        }
        let params = { pageNo: this.ipagination.current, pageSize: this.ipagination.pageSize }
        let buyerName = localStorage.getItem('buyerName')
        if (buyerName !== null) {
          this.queryParam.buyerName = buyerName
          params['buyerName'] = buyerName
        } else {
          params = this.getQueryParams() //查询条件
        }
        this.loading = true
        getAction(this.url.list, params).then(res => {
          if (res.success) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
        localStorage.removeItem('buyerName')
      }
    },
    watch: {
      value(val) {
        console.log(`selected:`, val)
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
